<template>
    <div>
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="80px"
        @submit.prevent
      >
        <el-row :gutter="10" justify="center">
          <el-col :span="10" :xs="24">
            <!--input输入-->
            <el-form-item label="头像" prop="">
              <Avatar
                :userId="userInfo.userId"
                :timestamp="timestamp"
                :width="46"
              ></Avatar>
              <el-button v-if="!disabled" style="margin-left: 20px;" @click="updateAvatar">修改头像</el-button>
          </el-form-item>
            <el-form-item label="姓名" prop="name" label-width="100px">
              <el-input
                clearable
                placeholder="请输入姓名"
                v-model.trim="formData.name"
                :disabled="disabled"
              ></el-input>
            </el-form-item>
            <el-form-item label="学工号" prop="userName" label-width="100px">
              <el-input
              clearable
                :disabled="disabled"
                v-model.trim="formData.userName"
              ></el-input>
            </el-form-item>

            <el-form-item label="邮箱" prop="email" label-width="100px">
              <el-input
                clearable
                :disabled="disabled"
                v-model.trim="formData.email"
              ></el-input>
            </el-form-item>
            <el-form-item label="角色类型"  label-width="100px"  >
                <el-input  disabled v-model="formData.roleTypeName" >
                </el-input>
            </el-form-item>

            <el-form-item label="密码" label-width="100px">
              <a
                v-if="disabled"
                href="javascript:void(0)"
                class="a-link">*********</a>
              <a
                v-if="!disabled"
                href="javascript:void(0)"
                class="a-link"
                @click="showUpdatePassword"
                >修改密码</a
              >
            </el-form-item>
            <div style="display: flex;width: 80%;margin :0 auto;">
              <el-button
                style="width: 50%"
                class="submit-btn"
                type="primary"
                v-if="!disabled"
                @click="savaMyInf"
                >保存</el-button
              >
              <el-button
                style="width: 50%"
                class="submit-btn"
                type="danger"
                v-if="disabled"
                @click="changeDisableStatus"
                >修改信息</el-button
              >

              <el-button
                style="width: 50%"
                class="submit-btn"
                type="danger"
                v-if="!disabled"
                @click="cancel"
                >取消</el-button
              >
            </div>
        </el-col>

        <el-col :span="12" style="" :xs="24">
          <el-card>
            <template #header>
              <span style="color: green;font-weight: bolder;">志愿记录</span>
            </template>
            <div ref="myCharts4VolunteerHoursDataRef" class="chart"></div>
          </el-card>
        </el-col>
        </el-row>
      </el-form>
    </div>
     <!--修改头像-->
     <UpdateAvatar
      ref="updateAvatarRef"
      @updateAvatar="reloadAvatar"
    ></UpdateAvatar>
    <UserPasswordEdit ref="updateMyPwdRef"></UserPasswordEdit>
  </template>

  <script setup>
  import UpdateAvatar  from "./UpdateAvatar.vue";
  import Avatar from "@/components/Avatar.vue";
  import UserPasswordEdit from "./UserPasswordEdit.vue";
  import { ref, reactive, getCurrentInstance, nextTick,shallowRef } from "vue";
  import {useRouter,useRoute} from "vue-router";
  import * as echarts from 'echarts';
  const { proxy } = getCurrentInstance();

  const router=useRouter();
  const route=useRoute();

  const api = {
    getUserInfo: "/account/getUserInfo",
    savaMyInf: "/account/updateMyInfo",
  };

  const userInfo=ref(proxy.VueCookies.get("userInfo"));



  const formData = ref({});
  const formDataRef = ref();

  const rules = {
    userName: [{ required: true, message: "请输入学工号" },
    ],
    email: [
    { required: true, message: "请输入邮箱" },
    {
      validator: proxy.Verify.email,
      trigger: "blur",
      message: "请输入正确的邮箱",
    },
  ],
    name:[{ required: true, message: "请输入姓名" }]
  };



  const volunteerHours=ref(null);
  const joinActivityTimes=ref(null);
  //获取用户信息
  const getUserInfo = async () => {
    let result = await proxy.Request({
      url: api.getUserInfo,
      params: {},
    });
    if (!result) {
      return;
    }
    formData.value = result.data.userInfoVO;
    volunteerHours.value=result.data.volunteerHours;
    joinActivityTimes.value=result.data.joinActivityTimes;
    init4ContentWeekData(volunteerHours.value,joinActivityTimes.value);
  };
  getUserInfo();

  //保存个人信息

  const savaMyInf = () => {
    console.log("点击提交")
    formDataRef.value.validate(async (valid) => {
      if (!valid) {
        return;
      }
      let result = await proxy.Request({
        url: api.savaMyInf,
        params:{
          userId:formData.value.userId,
          userName:formData.value.userName,
          name:formData.value.name,
          email:formData.value.email,
        }
      });
      if (!result) {
        return;
      }
      disabled.value=true;
      proxy.Message.success("保存成功");
    });
  };



  const disabled=ref(true);
  const changeDisableStatus=()=>{
    disabled.value=false;
  }

  // 取消修改
  const cancel=()=>{
    getUserInfo();
    disabled.value=true;
  }


//修改头像
const updateAvatarRef = ref();
const updateAvatar = () => {
  updateAvatarRef.value.show(userInfo.value);
};
  //修改密码
  const updateMyPwdRef=ref();
  const showUpdatePassword=()=>{
    updateMyPwdRef.value.showEdit("updateMyPwd",{});
  }


  const reloadAvatar=()=>{
    disabled.value=true;
    router.go(0);
  }



  const getOption = (title, xAxisData = [], seriesData = []) => {
  return {
    title: {
      text: title,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "red",
        },
      },
    },
    legend: {
      x: 200,
    },
    grid: {
      left: 50,
      right: 0,
    },
    xAxis: {
      axisLine: {
        lineStyle: {
          color: "#90979c",
        },
      },
      data: xAxisData,
      axisLabel: {
        interval: 0,
        rotate: "45",
      },
    },
    yAxis: {
      type: "value",
    },
    series: seriesData,
  };
};

//内容
const myCharts4VolunteerHoursDataRef = ref(null);
const myCharts4VolunteerHoursData = shallowRef();
const init4ContentWeekData = (volunteerHours,joinActivityTimes) => {
  nextTick(() => {
    // 基于准备好的dom，初始化echarts实例
    myCharts4VolunteerHoursData.value = echarts.init(
      myCharts4VolunteerHoursDataRef.value
    );
    // 绘制图表

    const xAxisData = ["志愿时长","志愿次数"];
    const seriesData = [
    {
      type:"bar",
      data:[volunteerHours,joinActivityTimes],
    }
    ];
    myCharts4VolunteerHoursData.value.setOption(
      getOption("", xAxisData, seriesData)
    );
  });
};





  </script>

  <style lang="scss" scoped>
  .chart {
  height: calc(100vh - 400px);
}
  </style>

